<template>
    <div class="control-section accordion-control-section">
         <div class="e-sample-resize-container">
             <ejs-accordion>
                 <e-accordionitems>
                     <e-accordionitem header='Athletic' iconCss='e-athletics e-acrdn-icons' content='#athletics' expanded='true'></e-accordionitem>
                     <e-accordionitem header='Water Games' iconCss='e-water-game e-acrdn-icons' content='#water_games'></e-accordionitem>
                     <e-accordionitem header='Racing' iconCss='e-racing-games e-acrdn-icons' content='#racing_games'></e-accordionitem>
                     <e-accordionitem header='Indoor Games' iconCss='e-indoor-games e-acrdn-icons' content='#indoor_games'></e-accordionitem>
                 </e-accordionitems>
             </ejs-accordion>
             <div id="athletics" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon marathon"></span> Marathon</li>
        <li><span class="e-acrdn-icons e-content-icon javelin"></span> Javelin Throw</li>
        <li><span class="e-acrdn-icons e-content-icon discus"></span> Discus Throw</li>
        <li><span class="e-acrdn-icons e-content-icon highjump"></span> High Jump</li>
        <li><span class="e-acrdn-icons e-content-icon longjump"></span> Long Jump</li>
    </div>
    <div id="water_games" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon dive"></span> Diving</li>
        <li><span class="e-acrdn-icons e-content-icon swimming"></span> Swimming</li>
        <li><span class="e-acrdn-icons e-content-icon marathan_swim"></span> Marathon Swimming</li>
        <li><span class="e-acrdn-icons e-content-icon sync_swim"></span> Synchronized Swimming</li>
        <li><span class="e-acrdn-icons e-content-icon waterpolo"></span> Water Polo</li>
    </div>
    <div id="racing_games" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon cycle_BMX"></span> Cycling BMX</li>
        <li> <span class="e-acrdn-icons e-content-icon cycle_Mountain"></span> Cycling Mountain Bike</li>
        <li> <span class="e-acrdn-icons e-content-icon cycle"></span> Cycle Racing</li>
        <li> <span class="e-acrdn-icons e-content-icon sailing"></span> Sailing</li>
        <li> <span class="e-acrdn-icons e-content-icon rowing"></span> Rowing</li>
    </div>
    <div id="indoor_games" style="display:none">
        <li><span class="e-acrdn-icons e-content-icon tennis"></span> Table Tennis</li>
        <li> <span class="e-acrdn-icons e-content-icon badminton"></span> Badminton</li>
        <li> <span class="e-acrdn-icons e-content-icon volleyball"></span> Volleyball</li>
        <li> <span class="e-acrdn-icons e-content-icon boxing"></span> Boxing</li>
        <li> <span class="e-acrdn-icons e-content-icon swimming_In"></span> Swimming</li>
    </div>
           <div id="action-description">
        <p>This sample demonstrates the icon representation of the Accordion. Click on the header element to expand/collapse the corresponding Accordion panel, and displays its content.</p>
    </div>

    <div id="description">
        <p>This Accordion is populated with icons which renders by mapping the <code>iconCss</code> field. This sample illustrates the some of the games list.</p>
        <p>More information about Accordion can be found in this <a href="https://ej2.syncfusion.com/vue/documentation/accordion/getting-started/" target="_blank">documentation</a> section.</p>
    </div>
         </div>
    </div>
</template>
/* custom code start */
<style>
 @font-face {
        font-family: 'acrdn-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-acrdn-icons {
        font-family: 'acrdn-icons';
        font-size: 16px;
        vertical-align: middle;
    }

    .bootstrap4 .e-acrdn-icons {
        font-size: 14px !important;
    }

    .e-bigger.bootstrap4 .e-acrdn-icons {
        font-size: 16px !important;
    }

    .e-bigger.bootstrap4 .e-acrdn-icons:not(.e-icons) {
        padding: 0 12px 0 0 !important;
    }

    .bootstrap4 .e-acrdn-icons:not(.e-icons) {
        padding: 0 8px 0 0 !important;
    }

    .cycle_BMX::before {
        content: "\e702"
    }

    .javelin::before {
        content: "\e700";
    }

    .marathon::before {
        content: "\e70e";
    }

    .tennis::before {
        content: "\e701";
    }

    .waterpolo::before {
        content: "\e703";
    }

    .swimming::before {
        content: "\e704";
        position: relative;
        top: 5px;
    }

    .discus::before {
        content: "\e705";
    }

    .boxing::before {
        content: "\e706";
    }

    .rowing::before {
        content: "\e707";
    }

    .highjump::before {
        content: "\e708";
    }

    .cycle::before {
        content: "\e70a";
    }

    .sailing::before {
        content: "\e70c";
    }

    .marathan_swim::before {
        content: "\e70d";
    }

    .boxing::before {
        content: "\e706";
    }

    .dive::before {
        content: "\e70f";
    }

    .swimming_In::before {
        content: "\e710";
        position: relative;
        top: 2px;
    }

    .badminton::before {
        content: "\e711";
    }

    .sync_swim::before {
        content: "\e713";
        position: relative;
        top: 3px;
    }

    .volleyball::before {
        content: "\e714";
    }

    .cycle_Mountain::before {
        content: "\e716";
    }

    .longjump::before {
        content: "\e717";
    }

    .e-athletics::before {
        content: "\e715";
    }

    .e-water-game::before {
        content: "\e70b";
    }

    .e-racing-games::before {
        content: "\e712";
    }

    .e-indoor-games::before {
        content: "\e709";
    }

    .e-acrdn-icons:not(.e-icons) {
        padding: 0 16px 0 0;
        vertical-align: middle;
    }

    #athletics li,
    #racing_games li,
    #water_games li,
    #indoor_games li {
        line-height: 36px;
        list-style-type: none;
        text-indent: 16px;
    }

    .accordion-control-section {
        margin: 0 10% 0 10%;
    }

    @media screen and (max-width: 768px) {
        .accordion-control-section {
            margin: 0;
        }
    }
</style>
/* custom code end */
<script>
import Vue from "vue";
import { AccordionPlugin } from "@syncfusion/ej2-vue-navigations";
Vue.use(AccordionPlugin);
export default Vue.extend({
  
});
</script>